<template>
  <header class="header header-page-bg">
    <div class="container">
      <div class="header-page-content">
        <div class="row align-items-center">
          <div class="col-md-7">
            <div class="header-content">
              <h1>About Us</h1>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                    <a href="javascript:;" @click="$jumpLink('/')">Home</a>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">
                    About Us
                  </li>
                </ol>
              </nav>
            </div>
          </div>
          <div class="col-md-5 d-none d-md-block">
            <div
              class="header-content-image header-content-abs-image header-content-abs-top"
            >
              <img
                :src="require('assets/images/inner-page-header/page-1.png')"
                alt="page"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- about-section -->
  <section class="about-section pt-100 pb-70">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6 pb-30">
          <div class="about-content-item desk-pad-right-50">
            <img
              :src="require('assets/images/about-content.jpg')"
              alt="about"
            />
          </div>
        </div>
        <div class="col-md-6 pb-30">
          <div class="about-content-item">
            <h2>
              We Have More Than 20+ Years Glory History Onto This Services
            </h2>
            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
              ononumy eirmod tempor invidunt ut labore et dolore mag aliquyiqm
              merat, sed diam voluptua. At vero eos et accusam et justo duo
              dolores et ea rebum. Stet clita kasd gubergren, no sea.
            </p>
            <p>
              Tkimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolo
              sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
              temir invidunt ut labore et dolore magna aliquyam erat, sed.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--  -->
  <!--  -->
  <section class="service-section pb-70">
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-delivery"></i>
            </div>
            <div class="service-card-details">
              <h3>Free Delivery</h3>
              <p>At home</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-alarm"></i>
            </div>
            <div class="service-card-details">
              <h3>Quick Support</h3>
              <p>In 24 hours</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-dollar"></i>
            </div>
            <div class="service-card-details">
              <h3>Money Saves</h3>
              <p>Ample amount</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-verified"></i>
            </div>
            <div class="service-card-details">
              <h3>Protectd Media</h3>
              <p>Ensure security</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--  -->
  <!--  -->
  <section class="testimonial-section p-tb-100 bg-offwhite">
    <div class="container position-relative">
      <div class="dot-animations mobile-xs-hide">
        <div class="dot-animation-item"></div>
        <div class="dot-animation-item"></div>
        <div class="dot-animation-item"></div>
        <div class="dot-animation-item"></div>
        <div class="dot-animation-item"></div>
      </div>
      <div class="section-title">
        <h2>Our Customer Feedback</h2>
      </div>
      <div class="testimonial-carousel-2 swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-2">
                <div class="client-feedback-thumb">
                  <img
                    :src="require('assets/images/clients/client-2-lg.jpg')"
                    alt="client"
                  />
                </div>
                <h3 class="client-feedback-name">Davit M. Cotlin</h3>
                <p class="client-feedback-designation">CEO, ShopSite</p>
                <div class="client-feedback-paragraph">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-2">
                <div class="client-feedback-thumb">
                  <img
                    :src="require('assets/images/clients/client-3-lg.jpg')"
                    alt="client"
                  />
                </div>
                <h3 class="client-feedback-name">Alena Disuza</h3>
                <p class="client-feedback-designation">HR, Rockify</p>
                <div class="client-feedback-paragraph">
                  <p>
                    Sed ut perspiciatis unde omnis iste natus error sit
                    voluptatem accusantium doloremque laudantium, totam rem
                    aperiam, eaque ipsa quae ab illo inventore veritatis et
                    quasi architecto beatae vitae dicta.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-2">
                <div class="client-feedback-thumb">
                  <img
                    :src="require('assets/images/clients/client-1-lg.jpg')"
                    alt="client"
                  />
                </div>
                <h3 class="client-feedback-name">Juanita Jensen</h3>
                <p class="client-feedback-designation">
                  Manager, eCommerce site
                </p>
                <div class="client-feedback-paragraph">
                  <p>
                    We are really dedicated to give you the best service and you
                    will be able to make a good quality environment on the
                    global market and it will help you to get a 30% discount on
                    the first product buy.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-navigation">
          <button type="button" class="swiper-button-prev">
            <i class="flaticon-back"></i>
          </button>
          <button type="button" class="swiper-button-next">
            <i class="flaticon-next"></i>
          </button>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </section>
  <!--  -->
  <section class="team-section pb-70">
    <div class="container">
      <div class="section-title">
        <h2>Let's Meet Up With Our Latest Team</h2>
      </div>
      <div class="row">
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="team-card">
            <div class="team-card-thumb">
              <img :src="require('assets/images/team/team-1.jpg')" alt="team" />
            </div>
            <div class="team-card-content">
              <h3>Norma Shuman</h3>
              <p>Business and shop specialist</p>
              <ul class="social-list social-list-secondcolor">
                <li>
                  <a href="#"><i class="flaticon-facebook"></i></a>
                </li>
                <li>
                  <a href="#"><i class="flaticon-instagram"></i></a>
                </li>
                <li>
                  <a href="#"><i class="flaticon-twitter"></i></a>
                </li>
                <li>
                  <a href="pinterest.com/"
                    ><i class="flaticon-pinterest"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="team-card">
            <div class="team-card-thumb">
              <img :src="require('assets/images/team/team-2.jpg')" alt="team" />
            </div>
            <div class="team-card-content">
              <h3>Terry Dell</h3>
              <p>E-Commerce business specilist</p>
              <ul class="social-list social-list-secondcolor">
                <li>
                  <a href="#"><i class="flaticon-facebook"></i></a>
                </li>
                <li>
                  <a href="#"><i class="flaticon-instagram"></i></a>
                </li>
                <li>
                  <a href="#"><i class="flaticon-twitter"></i></a>
                </li>
                <li>
                  <a href="pinterest.com/"
                    ><i class="flaticon-pinterest"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 pb-30 offset-lg-0 offset-sm-3">
          <div class="team-card">
            <div class="team-card-thumb">
              <img :src="require('assets/images/team/team-3.jpg')" alt="team" />
            </div>
            <div class="team-card-content">
              <h3>Ralph Kraus</h3>
              <p>CEO, globalshop</p>
              <ul class="social-list social-list-secondcolor">
                <li>
                  <a href="#"><i class="flaticon-facebook"></i></a>
                </li>
                <li>
                  <a href="#"><i class="flaticon-instagram"></i></a>
                </li>
                <li>
                  <a href="#"><i class="flaticon-twitter"></i></a>
                </li>
                <li>
                  <a href="pinterest.com/">
                    <i class="flaticon-pinterest"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--  -->
  <div class="partner-section pt-100 pb-100">
    <div class="container">
      <div class="partner-carousel swiper">
        <div class="swiper-wrapper" style="">
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-1.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-2.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-3.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-4.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-5.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-1.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide active" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-2.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide active" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-3.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide active" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-4.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide active" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-5.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide active" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-1.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-2.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-3.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-4.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="#">
                <img
                  :src="require('assets/images/partner/partner-5.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  -->
  <!--  -->
  <section class="newsletter-section mb-100">
    <div class="container">
      <div class="bg-offwhite pt-100 pb-70 pl-30 pr-30">
        <div class="row align-items-center">
          <div class="col-lg-6 pb-30">
            <div class="newsletter-item">
              <div
                class="section-title section-title-secondary section-title-left mb-0"
              >
                <h2>Add Us To Newsletter</h2>
                <small>Get 30% offer in first buy.</small>
              </div>
            </div>
          </div>
          <div class="col-lg-6 pb-30">
            <div class="newsletter-item">
              <form class="newsletter-form" novalidate="true">
                <div class="form-group">
                  <input
                    type="text"
                    placeholder="Enter email"
                    class="form-control form-control-background-white"
                    id="emails"
                    name="EMAIL"
                    required=""
                  />
                  <button
                    class="btn main-btn main-btn-secondary disabled"
                    type="submit"
                    style="pointer-events: all; cursor: pointer"
                  >
                    Subscribe Now
                  </button>
                </div>
                <div id="validator-newsletter" class="form-result"></div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import Swiper, {
  Navigation,
  Pagination,
  Scrollbar,
  Controller,
  Autoplay,
} from "swiper";
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const refData = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {
  Swiper.use([Navigation, Pagination, Controller, Autoplay]); // 使用需要的功能
  var testimonialCarousel2 = new Swiper(".testimonial-carousel-2", {
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      type: "custom",
      renderCustom: function (swiper, current, total) {
        var customPaginationHtml = "";
        for (var i = 0; i < total; i++) {
          //判断哪个分页器此刻应该被激活
          if (i == current - 1) {
            customPaginationHtml +=
              '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
          } else {
            customPaginationHtml +=
              '<span class="swiper-pagination-customs"></span>';
          }
        }
        return '<div class="swiperPag">' + customPaginationHtml + "</div>";
      },
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  var partnerCarousel = new Swiper(".partner-carousel", {
    slidesPerView: 5,
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});
</script>
<style lang="scss" scoped>
.testimonial-carousel-2 {
  position: static;

  .swiper-navigation button {
    width: 40px;
    height: 40px;
    border: 1px solid #fb8a35;
    // color: #555555;
    border-radius: 0;
    font-size: 13px;
    transition: all 0.3s linear;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;

    z-index: 10;
  }

  .swiper-navigation button.swiper-button-prev {
    left: -20px;
  }
  .swiper-navigation button.swiper-button-next {
    right: -20px;
  }

  :deep(.swiper-pagination) {
    text-align: center;
    margin-top: 10px;

    .swiperPag {
      span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #d6d6d6;
        display: inline-block;
        -webkit-backface-visibility: visible;
        transition: opacity 0.2s ease;
        border-radius: 30px;
      }

      .swiper-pagination-customs {
        opacity: 0.62;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear;
        background-color: #fb8a35;
      }

      .swiper-pagination-customs-active {
        width: 27px;
        opacity: 1;
        background-color: #fb8a35;
      }
    }
  }
}
</style>
